<script>
import { Spin } from 'ant-design-vue';

export default {
  name: 'top-list',

  components: {
    ASpin: Spin
  },

  props: {
    topList: {
      type: Array,
      default() {
        return []
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      artistPrompt: []
    }
  },

  methods: {
    getArtistText(value) {
      return value.map(item => item.name).join(';')
    }
  },

  render(h) {
    const videoItem = this.topList.map((item, index) => {
      const artists = item.artists.map(artist => {
        return h('span', {
          domProps: {
            innerHTML: artist.name
          },
        })
      })
      return h('li', {
        staticClass: 'top-item'
      }, [
        // 排名
        h('div', {
          staticClass: 'video-index font-24',
        }, [
          h('div', {
            domProps: {
              innerHTML: index + 1  < 10 ? `0${index + 1}` : index + 1
            }
          }),
          // 箭头
          h('a-icon', {
            staticClass: 'font-12',
            props: {
              type: item.lastRank > index + 1 ? 'arrow-up' : item.lastRank === index + 1 ? "minus" : 'arrow-down'
            },
            style: {
              'color': item.lastRank > index + 1 ? '#d24262' : item.lastRank === index + 1 ? "9f9f9f" : '#2f2fe9'
            } 
          })
        ]),
        // video信息
        h('div', {
          staticClass: 'video-info'
        }, [
          // 图片和热度
          h('div', {
            staticClass: 'video-img'
          }, [
            h('img', {
              staticClass: 'img-percent',
              directives: [
                {
                  name: "lazy",
                  rawName: "v-lazy",
                  value: `${item.cover}?param=300y180`,
                  expression: "item.cover",
                }
              ]
            }),
            h('div', {
              staticClass: 'video-play'
            }, [
              h('a-icon', {
                props: {
                  type: 'fire'
                }
              }),
              h('span', {
                domProps: {
                  innerHTML: item.score
                }
              })
            ])
          ]),
          // 右侧文字描述
          h('div', {
            staticClass: 'right-text mleft-20',
          }, [
            // 标题
            h('span', {
              staticClass: 'textmore-hidden',
              attrs: {
                title: item.name
              },
              domProps: {
                innerHTML: item.name
              }
            }),
            // 作者
            h('div', {
              attrs: {
                title: this.getArtistText(item.artists)
              },
              staticClass: 'artists font-12 text-hidden'
            }, [artists]),
            // 简述
            h('span', {
              staticClass: 'video-author textmore-hidden',
              attrs: {
                title: item.briefDesc
              },
              domProps: {
                innerHTML: item.briefDesc
              }
            })
          ])
        ])
      ])
    })
    return h('div', {
      attrs: {
        id: 'top-list'
      }
    }, [
      // 顶部插槽
      this.$slots.header,
      h('a-spin', {
        props: {
          spinning: this.loading
        }
      }, [
        // h('a-icon', {
        //   props: {
        //     // 是否旋转
        //     spin: true,
        //     slot: 'indicator',
        //     type: 'loading',
        //   },
        //   style: {
        //     fontSize: '40px',
        //     color: '#ec4141'
        //   }
        // }),
        h('ul', null, [videoItem])
      ])
    ])
  }
}
</script>

<style lang="less" scoped>
#top-list {
  ul {
    display: flex;
    flex-wrap: wrap;
    .top-item {
      width: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 10px 0 30px;
      border-bottom: 1px solid #f2f2f2;
      &:nth-child(2n + 1) {
        border-right: 1px solid #f2f2f2;
      }
      // &:nth-child(2n) {
      //   padding-left: 10px;
      // }
      .video-index {
        width: 40px;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #9f9f9f;
      }
      .video-info {
        flex: 1;
        display: flex;
        .video-img {
          position: relative;
          width: 200px;
          height: 120px;
          overflow: hidden;
          border-radius: 5px;
          .video-play {
            position: absolute;
            top: 10px;
            right: 10px;
            color: #fff;
          }
        }
        .right-text {
          width: 110px;
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: center;
          >span, >div {
            // height: 33.333333%;
          }
          .artists > span {
            &::after {
              content: '/';
              display: inline-block;
            }
            &:last-child::after {
              display: none;
            }
          }
          >span:last-child {
            color: #9f9f9f;
            font-size: 12px;
          }
        }
      }
    }
  }
  /deep/i.ant-spin-dot-item {
    background-color: #ec4141;
  }
}
</style>